<template>
  <div class="other-type-container">
    <!-- 子类型选择 -->
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item label="子类型" prop="subType">
          <el-radio-group v-model="formData.subType" @change="handleSubTypeChange">
            <el-radio value="纸盒">纸盒</el-radio>
            <el-radio value="标签">标签</el-radio>
            <el-radio value="纸袋">纸袋</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 纸盒配置 -->
    <div v-if="formData.subType === '纸盒'">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="盒型" prop="boxType">
            <div class="box-type-grid">
              <div
                v-for="boxType in boxTypeOptions"
                :key="boxType.value"
                class="box-type-item"
                :class="{ active: formData.boxType === boxType.value }"
                @click="formData.boxType = boxType.value"
              >
                <img
                  :src="boxType.image"
                  :alt="boxType.label"
                  @click.stop="previewImage(boxType.image, boxType.label)"
                />
                <span>{{ boxType.label }}</span>
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="宽度(mm)" prop="w">
            <el-input-number v-model="formData.w" :min="0" placeholder="宽度" style="width: 100%" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="长度(mm)" prop="l">
            <el-input-number v-model="formData.l" :min="0" placeholder="长度" style="width: 100%" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="高度(mm)" prop="h">
            <el-input-number v-model="formData.h" :min="0" placeholder="高度" style="width: 100%" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="材质" prop="material">
            <el-select v-model="formData.material" placeholder="请选择材质" style="width: 100%">
              <el-option label="白板纸" value="白板纸" />
              <el-option label="白卡纸" value="白卡纸" />
              <el-option label="铜版纸" value="铜版纸" />
              <el-option label="特种纸" value="特种纸" />
              <el-option label="瓦楞纸(B瓦)" value="瓦楞纸(B瓦)" />
              <el-option label="瓦楞纸(C瓦)" value="瓦楞纸(C瓦)" />
              <el-option label="瓦楞纸(D瓦)" value="瓦楞纸(D瓦)" />
              <el-option label="瓦楞纸(E瓦)" value="瓦楞纸(E瓦)" />
              <el-option label="白面纸" value="白面纸" />
              <el-option label="黄面纸" value="黄面纸" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="克重/厚度" prop="weight">
            <el-select v-model="formData.weight" placeholder="请选择克重/厚度" style="width: 100%">
              <el-option label="白卡纸200克" value="白卡纸200克" />
              <el-option label="白卡纸250克" value="白卡纸250克" />
              <el-option label="白卡纸300克" value="白卡纸300克" />
              <el-option label="白卡纸350克" value="白卡纸350克" />
              <el-option label="白卡纸400克" value="白卡纸400克" />
              <el-option label="白板纸250克" value="白板纸250克" />
              <el-option label="白板纸300克" value="白板纸300克" />
              <el-option label="白板纸350克" value="白板纸350克" />
              <el-option label="白板纸400克" value="白板纸400克" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="覆膜/上油" prop="coating">
            <el-select v-model="formData.coating" placeholder="请选择覆膜/上油" style="width: 100%">
              <el-option label="哑膜" value="哑膜" />
              <el-option label="亮膜" value="亮膜" />
              <el-option label="哑油" value="哑油" />
              <el-option label="亮油" value="亮油" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="印刷" prop="printing">
            <el-select v-model="formData.printing" placeholder="请选择印刷" style="width: 100%">
              <el-option label="单面印" value="单面印" />
              <el-option label="双面印(里外印)" value="双面印(里外印)" />
              <el-option label="四色印" value="四色印" />
              <el-option label="四色+专色印" value="四色+专色印" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="工艺" prop="process">
            <el-select
              v-model="formData.process"
              placeholder="请选择工艺"
              style="width: 100%"
              multiple
            >
              <el-option label="烫金" value="烫金" />
              <el-option label="烫银" value="烫银" />
              <el-option label="UV" value="UV" />
              <el-option label="激凸" value="激凸" />
              <el-option label="激凹" value="激凹" />
              <el-option label="压纹" value="压纹" />
              <el-option label="镂空" value="镂空" />
              <el-option label="易撕线" value="易撕线" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </div>

    <!-- 标签配置 -->
    <div v-if="formData.subType === '标签'">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="形状" prop="shape">
            <el-radio-group v-model="formData.shape">
              <el-radio value="方形">方形</el-radio>
              <el-radio value="圆形">圆形</el-radio>
              <el-radio value="异形">异形</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="宽度(mm)" prop="w">
            <el-input-number v-model="formData.w" :min="0" placeholder="宽度" style="width: 100%" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="长度(mm)" prop="l">
            <el-input-number v-model="formData.l" :min="0" placeholder="长度" style="width: 100%" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="材质" prop="material">
            <el-select v-model="formData.material" placeholder="请选择材质" style="width: 100%">
              <el-option label="透明" value="透明" />
              <el-option label="铜版纸" value="铜版纸" />
              <el-option label="合成纸" value="合成纸" />
              <el-option label="牛皮纸" value="牛皮纸" />
              <el-option label="美纹纸" value="美纹纸" />
              <el-option label="拉丝银(金)" value="拉丝银(金)" />
              <el-option label="乳白PVC" value="乳白PVC" />
              <el-option label="镭射" value="镭射" />
              <el-option label="UV转印水晶贴" value="UV转印水晶贴" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="厚度" prop="thickness">
            <el-select v-model="formData.thickness" placeholder="请选择厚度" style="width: 100%">
              <el-option label="8丝" value="8" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="覆膜/上油" prop="coating">
            <el-select v-model="formData.coating" placeholder="请选择覆膜/上油" style="width: 100%">
              <el-option label="哑油" value="哑油" />
              <el-option label="光油" value="光油" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="印刷" prop="printing">
            <el-select v-model="formData.printing" placeholder="请选择印刷" style="width: 100%">
              <el-option label="四色" value="四色" />
              <el-option label="四色+专色" value="四色+专色" />
              <el-option label="单面印" value="单面印" />
              <el-option label="双面印(里外印)" value="双面印(里外印)" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="工艺" prop="process">
            <el-select
              v-model="formData.process"
              placeholder="请选择工艺"
              style="width: 100%"
              multiple
            >
              <el-option label="烫金" value="烫金" />
              <el-option label="烫银" value="烫银" />
              <el-option label="UV" value="UV" />
              <el-option label="激凸" value="激凸" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="出货形式" prop="deliveryForm">
            <el-select
              v-model="formData.deliveryForm"
              placeholder="请选择出货形式"
              style="width: 100%"
            >
              <el-option label="单张" value="单张" />
              <el-option label="卷装(左出标)" value="卷装(左出标)" />
              <el-option label="卷装(右出标)" value="卷装(右出标)" />
              <el-option label="卷装(上出标)" value="卷装(上出标)" />
              <el-option label="卷装(下出标)" value="卷装(下出标)" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </div>

    <!-- 纸袋配置 -->
    <div v-if="formData.subType === '纸袋'">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="袋型" prop="bagType">
            <el-radio-group v-model="formData.bagType">
              <el-radio value="手提纸袋">手提纸袋</el-radio>
              <el-radio value="外卖纸袋">外卖纸袋</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="宽度(mm)" prop="w">
            <el-input-number v-model="formData.w" :min="0" placeholder="宽度" style="width: 100%" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="长度(mm)" prop="l">
            <el-input-number v-model="formData.l" :min="0" placeholder="长度" style="width: 100%" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="高度(mm)" prop="thickness">
            <el-input-number
              v-model="formData.thickness"
              :min="0"
              placeholder="高度"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="材质" prop="material">
            <el-select v-model="formData.material" placeholder="请选择材质" style="width: 100%">
              <el-option v-if="formData.bagType === '手提纸袋'" label="白卡纸" value="白卡纸" />
              <el-option v-if="formData.bagType === '手提纸袋'" label="铜版纸" value="铜版纸" />
              <el-option v-if="formData.bagType === '手提纸袋'" label="牛皮纸" value="牛皮纸" />
              <el-option v-if="formData.bagType === '手提纸袋'" label="黑卡纸" value="黑卡纸" />
              <el-option v-if="formData.bagType === '手提纸袋'" label="特种纸" value="特种纸" />
              <el-option v-if="formData.bagType === '外卖纸袋'" label="白牛皮纸" value="白牛皮纸" />
              <el-option v-if="formData.bagType === '外卖纸袋'" label="黄牛皮纸" value="黄牛皮纸" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            v-if="formData.bagType === '手提纸袋'"
            label="手提绳样式"
            prop="handleStyle"
          >
            <el-select
              v-model="formData.handleStyle"
              placeholder="请选择手提绳样式"
              style="width: 100%"
            >
              <el-option label="丝带" value="丝带" />
              <el-option label="棉绳" value="棉绳" />
              <el-option label="手挽纸绳" value="手挽纸绳" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="formData.bagType === '外卖纸袋'" label="开口样式" prop="openingStyle">
            <el-select
              v-model="formData.openingStyle"
              placeholder="请选择开口样式"
              style="width: 100%"
            >
              <el-option label="平口" value="平口" />
              <el-option label="锯齿" value="锯齿" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="覆膜/上油" prop="coating">
            <el-select v-model="formData.coating" placeholder="请选择覆膜/上油" style="width: 100%">
              <el-option label="亮油" value="亮油" />
              <el-option label="哑油" value="哑油" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="印刷" prop="printing">
            <el-select v-model="formData.printing" placeholder="请选择印刷" style="width: 100%">
              <el-option label="局部印" value="局部印" />
              <el-option label="满版印" value="满版印" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="工艺" prop="process">
            <el-select
              v-model="formData.process"
              placeholder="请选择工艺"
              style="width: 100%"
              multiple
            >
              <el-option label="烫金" value="烫金" />
              <el-option label="烫银" value="烫银" />
              <el-option label="UV" value="UV" />
              <el-option label="激凸" value="激凸" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </div>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item label="其他规格" prop="remark2">
          <el-input
            v-model="formData.remark2"
            style="width: 100%"
            maxlength="2000"
            show-word-limit
            rows="4"
            type="textarea"
            placeholder="添加其他规格信息或者任意备注"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <!-- 数量信息 -->
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="数量1" prop="quantity1">
          <el-input-number
            v-model="formData.quantity1"
            :min="0"
            placeholder="数量1"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="数量2" prop="quantity2">
          <el-input-number
            v-model="formData.quantity2"
            :min="0"
            placeholder="数量2"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="数量3" prop="quantity3">
          <el-input-number
            v-model="formData.quantity3"
            :min="0"
            placeholder="数量3"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <!-- 订单信息：新增模式不显示重量和总价 -->
    <el-divider v-if="!isAddMode" content-position="left">订单信息</el-divider>
    <!-- 报价员模式在status=0,1时可以修改重量 -->
    <el-row
      v-if="
        !isAddMode &&
        isQuoteMode &&
        (formData.status === 0 || formData.status === 1 || formData.status === 3)
      "
      :gutter="20"
    >
      <el-col :span="8">
        <el-form-item label="重量(kg)" prop="weight1">
          <el-input-number
            v-model="formData.weight1"
            :min="0"
            placeholder="重量"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="重量2" prop="weight2">
          <el-input-number
            v-model="formData.weight2"
            :min="0"
            placeholder="重量2"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="重量3" prop="weight3">
          <el-input-number
            v-model="formData.weight3"
            :min="0"
            placeholder="重量3"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <!-- 其他模式显示重量但不可编辑 -->
    <el-row
      v-if="
        !isAddMode &&
        (!isQuoteMode || (formData.status !== 0 && formData.status !== 1 && formData.status !== 3))
      "
      :gutter="20"
    >
      <el-col :span="8">
        <el-form-item label="重量(kg)" prop="weight1">
          <el-input-number
            v-model="formData.weight1"
            :min="0"
            placeholder="重量"
            style="width: 100%"
            disabled
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="重量2" prop="weight2">
          <el-input-number
            v-model="formData.weight2"
            :min="0"
            placeholder="重量2"
            style="width: 100%"
            disabled
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="重量3" prop="weight3">
          <el-input-number
            v-model="formData.weight3"
            :min="0"
            placeholder="重量3"
            style="width: 100%"
            disabled
          />
        </el-form-item>
      </el-col>
    </el-row>
    <!-- 报价员模式在status=0,1时可以修改总价 -->
    <el-row
      v-if="
        !isAddMode &&
        isQuoteMode &&
        (formData.status === 0 || formData.status === 1 || formData.status === 3)
      "
      :gutter="20"
    >
      <el-col :span="8">
        <el-form-item label="总价(元)" prop="price1">
          <el-input-number
            v-model="formData.price1"
            :min="0"
            placeholder="总价"
            style="width: 100%"
          />
          <div v-if="unitPrice1 > 0" class="unit-price-display">
            单价：{{ unitPrice1.toFixed(4) }} 元/个
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="总价2" prop="price2">
          <el-input-number
            v-model="formData.price2"
            :min="0"
            placeholder="总价2"
            style="width: 100%"
          />
          <div v-if="unitPrice2 > 0" class="unit-price-display">
            单价：{{ unitPrice2.toFixed(4) }} 元/个
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="总价3" prop="price3">
          <el-input-number
            v-model="formData.price3"
            :min="0"
            placeholder="总价3"
            style="width: 100%"
          />
          <div v-if="unitPrice3 > 0" class="unit-price-display">
            单价：{{ unitPrice3.toFixed(4) }} 元/个
          </div>
        </el-form-item>
      </el-col>
    </el-row>
    <!-- 其他模式显示总价但不可编辑 -->
    <el-row
      v-if="
        !isAddMode &&
        (!isQuoteMode || (formData.status !== 0 && formData.status !== 1 && formData.status !== 3))
      "
      :gutter="20"
    >
      <el-col :span="8">
        <el-form-item label="总价(元)" prop="price1">
          <el-input-number
            v-model="formData.price1"
            :min="0"
            placeholder="总价"
            style="width: 100%"
            disabled
          />
          <div v-if="unitPrice1 > 0" class="unit-price-display">
            单价：{{ unitPrice1.toFixed(4) }} 元/个
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="总价2" prop="price2">
          <el-input-number
            v-model="formData.price2"
            :min="0"
            placeholder="总价2"
            style="width: 100%"
            disabled
          />
          <div v-if="unitPrice2 > 0" class="unit-price-display">
            单价：{{ unitPrice2.toFixed(4) }} 元/个
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="总价3" prop="price3">
          <el-input-number
            v-model="formData.price3"
            :min="0"
            placeholder="总价3"
            style="width: 100%"
            disabled
          />
          <div v-if="unitPrice3 > 0" class="unit-price-display">
            单价：{{ unitPrice3.toFixed(4) }} 元/个
          </div>
        </el-form-item>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from "vue";

// 盒型图片导入
import boxType1Image from "@/assets/images/纸盒盒型/上下插盖盒.png";
import boxType2Image from "@/assets/images/纸盒盒型/上下盖.png";
import boxType3Image from "@/assets/images/纸盒盒型/上挂下盖盒.png";
import boxType4Image from "@/assets/images/纸盒盒型/上挂沟底盒.png";
import boxType5Image from "@/assets/images/纸盒盒型/上盖下插底盒.png";
import boxType6Image from "@/assets/images/纸盒盒型/书本盒.png";
import boxType7Image from "@/assets/images/纸盒盒型/天地盖.png";
import boxType8Image from "@/assets/images/纸盒盒型/对开口箱瓦楞盒.png";
import boxType9Image from "@/assets/images/纸盒盒型/手提盒.png";
import boxType10Image from "@/assets/images/纸盒盒型/抽屉盒.png";
import boxType11Image from "@/assets/images/纸盒盒型/提拔盒.png";
import boxType12Image from "@/assets/images/纸盒盒型/斜面盒.png";
import boxType13Image from "@/assets/images/纸盒盒型/自动锁底盒.png";
import boxType14Image from "@/assets/images/纸盒盒型/自成形盒.png";
import boxType15Image from "@/assets/images/纸盒盒型/飞机盒.png";

defineOptions({
  name: "OtherType",
  inheritAttrs: false,
});

const props = defineProps({
  formData: {
    type: Object,
    required: true,
  },
  isAddMode: {
    type: Boolean,
    default: false,
  },
  isQuoteMode: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["update:form-data"]);

// 盒型选项（15种盒型）
const boxTypeOptions = ref([
  { label: "上下插盖盒", value: "上下插盖盒", image: boxType1Image },
  { label: "上下盖", value: "上下盖", image: boxType2Image },
  { label: "上挂下盖盒", value: "上挂下盖盒", image: boxType3Image },
  { label: "上挂沟底盒", value: "上挂沟底盒", image: boxType4Image },
  { label: "上盖下插底盒", value: "上盖下插底盒", image: boxType5Image },
  { label: "书本盒", value: "书本盒", image: boxType6Image },
  { label: "天地盖", value: "天地盖", image: boxType7Image },
  { label: "对开口箱瓦楞盒", value: "对开口箱瓦楞盒", image: boxType8Image },
  { label: "手提盒", value: "手提盒", image: boxType9Image },
  { label: "抽屉盒", value: "抽屉盒", image: boxType10Image },
  { label: "提拔盒", value: "提拔盒", image: boxType11Image },
  { label: "斜面盒", value: "斜面盒", image: boxType12Image },
  { label: "自动锁底盒", value: "自动锁底盒", image: boxType13Image },
  { label: "自成形盒", value: "自成形盒", image: boxType14Image },
  { label: "飞机盒", value: "飞机盒", image: boxType15Image },
]);

// 图片预览功能
function previewImage(imageSrc, imageTitle) {
  // 创建预览弹窗
  const overlay = document.createElement("div");
  overlay.style.cssText = `
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    cursor: pointer;
  `;

  const imgContainer = document.createElement("div");
  imgContainer.style.cssText = `
    max-width: 90%;
    max-height: 90%;
    text-align: center;
  `;

  const img = document.createElement("img");
  img.src = imageSrc;
  img.alt = imageTitle;
  img.style.cssText = `
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  `;

  const title = document.createElement("div");
  title.textContent = imageTitle;
  title.style.cssText = `
    color: white;
    font-size: 18px;
    margin-top: 15px;
    font-weight: 500;
  `;

  imgContainer.appendChild(img);
  imgContainer.appendChild(title);
  overlay.appendChild(imgContainer);

  // 点击关闭
  overlay.addEventListener("click", () => {
    document.body.removeChild(overlay);
  });

  // ESC键关闭
  const handleEsc = (e) => {
    if (e.key === "Escape") {
      document.body.removeChild(overlay);
      document.removeEventListener("keydown", handleEsc);
    }
  };
  document.addEventListener("keydown", handleEsc);

  document.body.appendChild(overlay);
}

// 处理子类型切换
function handleSubTypeChange() {
  // 清空相关字段
  const fieldsToReset = [
    "boxType",
    "shape",
    "bagType",
    "material",
    "weight",
    "thickness",
    "coating",
    "printing",
    "process",
    "deliveryForm",
    "handleStyle",
    "openingStyle",
    "l",
    "w",
    "h",
  ];

  fieldsToReset.forEach((field) => {
    if (props.formData[field] !== undefined) {
      props.formData[field] = null;
    }
  });

  emit("update:form-data", props.formData);
}
</script>

<style scoped>
.other-type-container {
  padding: 20px;
}

.box-type-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 15px;
  margin-top: 10px;
}

.box-type-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  border: 2px solid #e4e7ed;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: #fff;
}

.box-type-item:hover {
  border-color: #409eff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
}

.box-type-item.active {
  border-color: #409eff;
  background-color: #ecf5ff;
}

.box-type-item img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  margin-bottom: 8px;
  cursor: zoom-in;
  transition: transform 0.2s ease;
}

.box-type-item img:hover {
  transform: scale(1.05);
}

.box-type-item span {
  font-size: 12px;
  text-align: center;
  color: #606266;
  line-height: 1.2;
}

.box-type-item.active span {
  color: #409eff;
  font-weight: 500;
}
</style>
